<template>
  <div class="login-page">
    <section class="page">
      <!-- 头部导航栏 -->
      <Header />
      <div class="content">
        <div class="bg-content"></div>
        <div class="login-box">
          <p class="title">登录/注册</p>
          <p class="tip">请使用账号登录</p>
          <div class="list-box">
            <div class="label">
              <p class="label-title">国家/地区</p>
              <p class="label-tip" style="margin-right: 30px">Country/State</p>
            </div>
            <div class="value" style="cursor: pointer">
              <p class="value-title">{{ chinese_name }}</p>
              <i class="el-icon-arrow-right icon"></i>
              <el-select
                style="width: 145px; margin-right: 12px"
                v-model="chinese_name"
              >
                <el-option
                  v-for="(item, index) in nationPhoneNumber"
                  :key="index"
                  :value="item.chinese_name"
                  :label="'+' + item.chinese_name"
                  >{{ item.chinese_name }}</el-option
                >
              </el-select>
            </div>
          </div>
          <div class="list-box">
            <div class="label">
              <p class="label-title" style="margin-right: 18px; font-size: 15px">
                +{{ chinese_code }}
              </p>
              <!-- <p class="label-tip label-tip2" style="margin-right: 22px">Phone Number</p> -->
              <p class="label-tip" style="margin-right: 22px">Phone Number</p>
            </div>
            <div class="value">
              <input
                class="value-input"
                style="width: 175px"
                placeholder="手机号码"
                type="number"
                oninput="if(value.length>20)value=value.slice(0,20)"
                v-model="mobile"
              />
              <span class="code" v-show="!timeout" @click="getCode"
                >发送验证码</span
              >
              <span
                class="code"
                v-show="timeout"
                :style="timeout ? 'color:#C8C8C8' : ''"
                >已发送{{ timeout }}s</span
              >
            </div>
          </div>
          <div class="list-box">
            <div class="label">
              <p class="label-title">短信验证码</p>
              <p class="label-tip" style="margin-right: 10px">
                Verification Code
              </p>
            </div>
            <div class="value" style="padding-left: 10px">
              <input
                class="value-input"
                placeholder="短信验证码"
                oninput="if(value.length>6)value=value.slice(0,6)"
                v-model="code"
              />
              <!-- <img class="code" :src="codeData.img" alt="" @click="getCode"> -->
            </div>
          </div>
          <div class="code-tip" v-if="errCode">
            {{
              ["", "手机号码", "密码", "短信验证码"][errCode]
            }}输入错误，请重新输入
          </div>
          <div
            class="login-btn"
            :class="[checked ? '' : 'checked']"
            @click="submit"
          >
            登录/注册
          </div>
          <div class="login-tip">
            <el-checkbox class="login-check" v-model="checked"></el-checkbox>
            已阅读并同意
            <span class="login-agreement" @click="linkTo('ServicePolicy')"
              >《用户服务协议》</span
            >
            和
            <span class="login-agreement" @click="linkTo('PrivacyPolicy')"
              >《隐私协议》</span
            >
          </div>
          <!-- <div class="toLinks" @click="switchPageType">{{ !isLogin ? '登录' : '注册' }}</div> -->
        </div>
      </div>
    </section>
    <div class="mobile-login">
      <div class="mobile-login-title">欢迎来到数据学徒实习平台</div>
      <div class="mobile-login-wrap">
        <div class="wrap-item country">
          <div class="label">
            <p class="label-title">国家/地区</p>
          </div>
          <div class="value" @click="show = true">
            <span>{{ chinese_name }}</span>
          </div>
          <img src="../../assets/images/more.png" alt="" />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
              v-model="chinese_name"
              title="请选择所在地区"
              :options="countryOptions"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
        </div>
        <div class="wrap-item phone-number">
          <div class="label">
              <p class="label-title">
                +{{ chinese_code }}
              </p>
            </div>
            <div class="value">
              <input
                class="value-input"
                style="width: 175px"
                placeholder="请填写手机号码"
                type="number"
                oninput="if(value.length>20)value=value.slice(0,20)"
                v-model="mobile"
              />
            </div>
            <div class="code" v-show="!timeout" @click="getCode">发送验证码</div>
            <div class="code" v-show="timeout" :class="timeout ? 'timeout' : ''">已发送{{ timeout }}s</div>
        </div>
        <div class="wrap-item ver-code">
          <div class="label">
            <p class="label-title">短信验证码</p>
          </div>
          <div class="value">
            <input
              class="value-input"
              placeholder="请填写短信验证码"
              oninput="if(value.length>6)value=value.slice(0,6)"
              v-model="code"
            />
          </div>
        </div>
      </div>
      <div class="tip-box">
        <div class="code-tip" v-if="errorText">
          <span class="error-icon">X</span>
          <span class="error-text">{{ errorText }}</span>
        </div>
      </div>
      <div class="login-btn-box">
        <div
          class="login-btn"
          :class="[checked ? 'checked' : '']"
          :disabled="!checked"
          @click="submit"
        >
          登录/注册
        </div>
      </div>
      <div class="login-tip">
        <van-checkbox class="login-check" shape="square" v-model="checked"></van-checkbox>
        已阅读并同意
        <span class="login-agreement" @click="linkTo('ServicePolicy')"
          >《用户服务协议》</span
        >
        和
        <span class="login-agreement" @click="linkTo('PrivacyPolicy')"
          >《隐私协议》</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/header.vue";
import wx from 'weixin-js-sdk'

import {
  getSmsCode,
  smsLogin,
  getUerInfo,
} from "../../request/api";
import {
  nationPhoneNumber,
  getNationPhoneNumber,
} from "@/utils/frontDataDict.js";
import { mapMutations } from "vuex";
export default {
  name: "login",
  props: {},
  components: { Header },
  data() {
    return {
      checked: true,
      isLogin: true,
      timeout: null,
      setTimeoutVar: null,
      nationPhoneNumber: nationPhoneNumber,
      chinese_name: "中国",
      chinese_code: "86",
      mobile: "",
      password: "",
      errCode: 0,
      code: "",
      codeData: {},
      isLoading: false,
      show: false,
      countryOptions: [],
      errorText: '',
      redirectUrl: ''
    };
  },
  computed: {},
  watch: {
    chinese_name: function (newValue) {
      this.chinese_code = getNationPhoneNumber(newValue);
    },
    mobile: function () {
      this.errorText = '';
      if (this.mobile) {
        this.errCode = 0;
      }
    },
    code: function () {
      this.errorText = '';
    }
  },
  methods: {
    ...mapMutations["loginOut"],
    //判断当前所在环境
    testBrowser () {
        let ismo = false
        let ua = window.navigator.userAgent.toLowerCase()
        console.log(ua)
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
            wx.miniProgram.getEnv((res) => {
            console.log(res)
            if (res.miniprogram) {
                // 在小程序
                console.log('在小程序')
                ismo = true
            } else {
                //在微信里
                console.log('在微信里')
                ismo = false
            }
            })
        } else {
            console.log('不在微信里面')
            ismo = false

            // 不在微信里面
        }
        return ismo
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      let countryName = selectedOptions.map((option) => option.text);
      this.chinese_name = countryName[0];
    },
    getCountryArr(arr) {
      let newArr = arr.map((item) => {
        item.text = item.chinese_name;
        return item;
      });
      return newArr;
    },
    linkTo(url) {
      this.$router.push({ name: "cultivate", query: { type: 2, url } });
    },
    getCode() {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!this.mobile) {
        this.errCode = 1;
        this.errorText = "请填写手机号码";
        return;
      }
      if (!reg.test(this.mobile)) {
        this.errCode = 1;
        this.errorText = '请输入11位国内手机号';
        return;
      }
      if (reg.test(this.mobile) && this.chinese_code !== "86") {
        this.$message.warning("当前手机号为中国号码，请选择正确国家区号");
        return;
      }
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      getSmsCode({
        mobile: "+" + this.chinese_code + "-" + this.mobile,
        scene: 4,
      })
        .then((res) => {
          if (res.data) {
            let times = 60;
            this.timeout = 60;
            this.setTimeoutVar = setInterval(() => {
              if (times <= 0) {
                clearInterval(this.setTimeoutVar);
                this.timeout = null;
                this.isLoading = false;
                return;
              }
              times -= 1;
              this.timeout = times;
            }, 1000);
          }
        })
        .catch((e) => {
          this.isLoading = false;
        });
    },
    switchPageType() {
      this.isLogin = !this.isLogin;
    },
    submit() {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!this.checked) return;
      if (!this.mobile) {
        this.errCode = 1;
        this.errorText = '请填写手机号码';
        return;
      } else if (!reg.test(this.mobile)) {
        this.errorText = '请输入11位国内手机号';
        return;
      }
      if (!this.code) {
        this.errCode = 3;
        this.errorText = '请填写验证码';
        return;
      }
      this.errCode = 0;
      let params = {
        mobile: "+" + this.chinese_code + "-" + this.mobile,
        code: this.code,
      };
      // 短信验证码登录
      smsLogin(params)
        .then((res) => {
          if (res.code === 0 && res.data) {
            this.$store.commit("setAuthorization", res.data.token);
            const isWxscx = this.testBrowser()
            if (isWxscx) {
                if (res.data.registerFlag === 0) {
                    console.log('新用户注册')
                    // TODO 调用小程序方法请求注册统计
                }
            }
            this.$store.commit("setUserMobile", this.mobile);
            this.$store.commit(
              "setisChina",
              this.checkIsChina(this.chinese_code, this.mobile)
            );
            const jobId = this.$route.params.id;
            if (jobId) {
              //通过分享进来的直接去职位详情
              localStorage.setItem("currentJobId", jobId);
              this.$router.push({
                path: `/jobDetail/${jobId}`,
              });
              return;
            }
            getUerInfo({ mobile: this.mobile }).then((res) => {
              if (res.code === 0 && res.data) {
                let { nickname } = res.data;
                if (nickname && nickname !== "") {
                    if (this.redirectUrl !== '') {
                        window.location.href = this.redirectUrl
                    } else {
                        this.$router.push({ name: "home" });
                    }
                } else {
                  this.$router.push({ name: "userInformation" });
                }
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          this.isLoading = false;
        });
    },
    checkIsChina(code, mobile) {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      return code == "86" && reg.test(mobile);
    },
  },
  created() {
    let {redirectUrl} = this.$route.query
    if (redirectUrl) {
        console.log('redirectUrl>>>', redirectUrl)
        this.redirectUrl = decodeURIComponent(redirectUrl)
    }
  },
  mounted() {
    // this.nextTick()
    this.$store.commit("loginOut");
    this.countryOptions = this.getCountryArr(nationPhoneNumber);
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .el-select {
    width: 100% !important;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .content {
    position: relative;
    margin-top: 80px;
    height: calc(100vh - 80px);
    min-height: 630px;
    z-index: 1;
    .bg-content {
      position: relative;
      width: 100%;
      height: 100%;
      background: url("../../assets/images/login/login-bg.jpeg") no-repeat
        center;
      background-size: cover;
      filter: blur(2px);
    }
    .login-box {
      width: 335px;
      position: absolute;
      top: 50%;
      margin: auto;
      transform: translateY(-50%);
      right: 18.75%;
      z-index: 99;
      background: #ffffff;
      box-shadow: 0px 3px 7px 0px rgba(70, 75, 83, 0.19);
      border-radius: 8px;
      padding: 22px 15px 40px;

      .title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 6px;
      }

      .tip {
        height: 14px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #b0b0b0;
        line-height: 14px;
        margin-bottom: 30px;
      }

      .list-box {
        height: 46px;
        border-bottom: 1px solid #d4d6da;
        display: flex;
        align-items: center;

        .label {
          display: flex;
          flex-direction: column;

          .label-title {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 17px;
          }

          .label-tip {
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 14px;
          }
          .label-tip2 {
            display: none;
          }
        }

        .value {
          padding-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex: 1;
          position: relative;
          &::after {
            content: "";
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #d4d6da;
            height: 18px;
            position: absolute;
            width: 1;
          }

          .value-title {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 21px;
          }

          .value-input {
            border: none;
            font-size: 15px;
            outline: none;
          }

          .value-tip {
            font-size: 15px;
            font-weight: 500;
            color: #4a90e2;
            cursor: pointer;
          }

          .icon {
            font-size: 18px;
            color: #b7bfce;
          }

          .code {
            position: absolute;
            cursor: pointer;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 15px;
            font-weight: 500;
            color: #4a90e2;
            line-height: 33px;
          }
        }
      }

      .login-btn {
        height: 44px;
        border-radius: 3px;
        background: #4677b9;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        margin-top: 25px;
        cursor: pointer;
        &.checked {
          background: #c8c8c8;
          cursor: not-allowed;
        }
      }

      .login-tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 17px;
        display: flex;
        align-items: center;
      }

      .login-agreement {
        color: #4a90e2 !important;
        cursor: pointer;
      }

      .login-check {
        margin-right: 10px;
      }

      .code-tip {
        width: 100%;
        margin-top: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #ff5469;
        line-height: 17px;
      }

      .toLinks {
        position: absolute;
        color: green;
        text-align: center;
        cursor: pointer;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

input::-webkit-input-placeholder {
  color: #c4c4c4;
}

@media screen and (min-width: 1600px) {
  #app {
    .login-box {
      width: 534px;
      height: 630px;
      // right: 110px;
      border-radius: 12px;
      padding: 35px 25px 70px;
      .title {
        font-size: 32px;
        font-weight: 600;
        color: #37383d;
        line-height: 45px;
        margin-bottom: 6px;
        margin: 45px 0 6px;
      }
      .tip {
        font-size: 18px;
        font-weight: 400;
        color: #b0b0b0;
        line-height: 25px;
        margin-bottom: 33px;
      }
      .list-box {
        height: 75px;
        border-bottom: 1px solid #d4d6da;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .label {
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
        }
        .label-title {
          font-size: 18px !important;
          color: #37383d;
          line-height: 25px;
          margin-bottom: 2px;
        }
        .label-tip2 {
          display: block;
        }
        .label-tip {
          font-size: 15px;
          color: #9597a0;
          line-height: 21px;
          margin-right: 30px;
          margin-top: 15px;
        }
        .value {
          border-left: 1px solid #d4d6da;
          padding-left: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex: 1;
          height: 80%;
          .value-title {
            font-size: 24px;
            line-height: 33px;
          }
        }
        .value-input {
          font-size: 24px;
        }
        .code {
          font-size: 24px;
        }
      }
      .code-tip {
        font-size: 18px;
        line-height: 25px;
        margin-top: 12px;
      }
      .login-btn {
        height: 70px;
        font-size: 25px;
        margin-top: 40px;
      }
      .login-tip {
        font-size: 18px;
        line-height: 25px;
      }
    }
  }
}
@media (min-width: 769px) {
  .mobile-login {
    display: none;
  }
}
@media (max-width: 768px) {
  .page {
    display: none;
  }
  .mobile-login {
    padding: 0.24rem 0.1rem 0;
  }
  .mobile-login-title {
    height: 0.28rem;
    font-size: 0.2rem;
    font-weight: 500;
    color: #37383D;
    line-height: 0.28rem;
    padding-left: 0.05rem;
  }
  .mobile-login-wrap {
    padding-top: 0.21rem;
  }
  .wrap-item {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;
    .label {
      width: 1rem;
      .label-title {
        padding-left: 0.05rem;
        font-size: 0.14rem;
        font-weight: 500;
        color: #37383D;
      }
    }
    .value {
      flex: 1;
      span {
        font-size: 0.14rem;
        color: #37383D;
      }
      input {
        border: none;
        font-size: 0.14rem;
        color: #37383D;
      }
    }
    img {
      width: 0.07rem;
      height: 0.12rem;
      margin-right: 0.08rem;
    }
    .code {
      width: auto;
      font-size: 0.13rem;
      padding: 0 0.06rem;
    }
    .timeout {
      color: #C8C8C8;
    }
  }
  .code-tip {
    height: 0.17rem;
    padding-top: 0.12rem;
    span {
      font-size: 0.12rem;
      color: #FC9C21;
      line-height: 0.17rem;
    }
    .error-icon {
      width: 0.08rem;
      height: 0.08rem;
      padding: 0 0.05rem;
    }
  }
  .login-btn-box {
    padding: 1.33rem 0.05rem 0.15rem;
    .login-btn {
      width: 3.45rem;
      height: 0.55rem;
      font-weight: 500;
      color: #FFFFFF;
      background: #C8C8C8;
      border-radius: 0.05rem;
      font-size: 0.18rem;
      font-weight: 500;
      text-align: center;
      line-height: 0.55rem;
    }
    .checked {
      background-color: #3D6CB0;
    }
  }
  .login-tip {
    width: 100%;
    height: 0.18rem;
    font-size: 0.13rem;
    color: #969696;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-agreement {
      display: inline-block;
      color: #3D6CB0;
    }
  }
  /deep/ .van-checkbox {
    margin-right: 0.05rem;
  }
  /deep/ .van-checkbox__icon--checked .van-icon {
    background-color: #3D6CB0;
    border-color: #3D6CB0;
  }
  /deep/ .van-tabs__line {
    background-color: #4677b9;
  }
  /deep/ .van-cascader__option--selected {
    color: #4677b9;
  }
}
</style>
